<template>
  <view
    class="custom-class demo-block van-clearfix {{ padding ? 'demo-block--padding' : '' }}"
  >
    <view v-if="title" class="demo-block__title">{{ title }}</view>
    <view class="demo-block__card" v-if="card">
      <slot />
    </view>
    <slot v-else />
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    title: String,
    padding: Boolean,
    card: Boolean,
  },
  setup() {},
});
</script>

<style>
/* @import '../../dist/common/index.wxss'; */
.demo-block__title {
  margin: 0;
  padding: 20px 15px 15px;
  color: rgba(69, 90, 100, 0.6);
  font-weight: 400;
  font-size: 14px;
}

.demo-block__card {
  overflow: hidden;
  border-radius: 8px;
}

.demo-block--padding {
  padding: 0 15px;
}

.demo-block--padding .demo-block__title {
  padding-left: 0;
}
</style>
